<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/utils/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/utils/common.css" />
	<title></title>
	<style>
		.search-button {
			margin-top: 50px;
		}
		.money-span {
			color: #666666;
		}
		.money-span span {
			margin-left: 30px;
		}
		.select-group {
			display: inline-block;
			margin-left: 20px;
		}
		.select-group select {
			display: inline-block;
			margin-left: 20px;
			width: auto;
			vertical-align: middle;
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="search-button">
			<div class="search-content">
				<input id="searchInput" type="search" class="form-control" placeholder="搜索昵称">
			</div>
			<div class="money-span">
				<!--<span>总金额：100.0</span>
				<span>剩余金额：22.23</span>
				<span>发放金额：77.77</span>-->
			</div>
		</div>
		<div class="table-list">
			<div class="table-btn">
				<button id="exportTable" class="btn btn-default" type="button">导出表格</button>
				<div class="select-group">
					<select id="userType" class="form-control">
					  	<option value="0">所有用户</option>
					 	<!--<option>正常用户</option>-->
					  	<option value="1">刷单用户</option>
					  	<!--<option>企业用户</option>-->
					</select>
					<!--<select class="form-control">
					  	<option>所有地区</option>
					 	<option>有效地区</option>
					  	<option>无效地区</option>
					</select>-->
				</div>
			</div>
			<table id="detailsTable" class="table table-bordered table-hover table-striped">
				<thead>
					<tr>
						<th>序号</th>
						<th>昵称</th>
						<th>阅读次数</th>
						<th>阅读时长</th>
						<th>获取金额</th>
						<th>获取理由</th>
						<th>获取时间</th>
						<th>是否领取</th>
					</tr>
				</thead>
				<tbody>
					<!--<tr>
						<td>1</td>
						<td>多浪</td>
						<td>213</td>
						<td>2018-5-4 16:36:22</td>
						<td>12</td>
						<td>转发朋友圈</td>
						<td>2018-5-14 10:46:15</td>
						<td>是</td>
					</tr>-->
				</tbody>
			</table>
			<nav id="page" class="text-center" aria-label="Page navigation">
				<ul class="pagination">
				</ul>
			</nav>
		</div>
	</div>	
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/page.js"></script>
	<script type="text/javascript" src="../../js/utils/jquery.cookie.js" ></script>
	<script type="text/javascript" src="../../js/utils/boot.js?version=2" ></script>
	<script>
		var userID,companyID,redPackID,nickName,userType=0,pageNo=1;
		$(function(){
			userID = $.cookie("userID");
			companyID = $.cookie("companyID");
			redPackID = base.getParameter("redPackID");
			base.postData(base.url.getRedPackAmount, {userID:userID,companyID:companyID,redPackID:redPackID}, callbackGetRedPackAmount);
		});
		function callbackGetRedPackAmount(data){
			if (data.success) {
				initRedPacketDetails();
				$(".money-span").html('<span>总金额：'+data.context.redPackSum+'</span><span>剩余金额：'+data.context.surplusPrice+'</span><span>发放金额：'+data.context.grantPrice+'</span>');
			}
		}
		
		function initRedPacketDetails(){
			var param = {
				userID:userID,
				companyID:companyID,
				redPackID:redPackID,
				nickName:nickName,
				userType:userType,
				pageNo:pageNo
			}
			base.postData(base.url.getGrantRedPackInfo, param, callbackGetGrantRedPackInfo);
		}
		function callbackGetGrantRedPackInfo(data){
			if (data.success) {
				var html = '';
				for (var i=0; i<data.context.redPacketDetailList.length; i++) {
					html += pingGetGrantRedPackInfo(data.context.redPacketDetailList[i], i+1);
				}
				$("#detailsTable tbody").html(html);
				if (pageNo == 1){
					//初始化分页
					if (data.context.totalPage == 0) {
						data.context.totalPage = 1;
					}
					var totalPage = Math.ceil(data.context.totalPage/10);
					var page = {
						pageIndex:1,//初始页数
						currentPage:1,//当前页
						showPage:5,//显示页数
						totalPage:totalPage,//总页数
						onPageClick: function(page) {
							$("#page").initPage(page);
							pageNo = page.currentPage;
							initRedPacketDetails();
			    			return false;  //默认的翻页事件
					    }
					};
					$("#page").initPage(page);
				}
			}
		}
		function pingGetGrantRedPackInfo(data, i){
			var _readTime = "";
			if (data.readTime/60>1) {
				_readTime = Math.floor(data.readTime/60) +"分钟"+data.readTime%60+"秒";
			} else if (data.readTime/60==1) {
				_readTime = Math.floor(data.readTime/60) +"分钟";
			} else {
				_readTime = data.readTime%60 +"秒";
			}
			var html = '<tr>'+
						'	<td>'+i+'</td>'+
						'	<td>'+data.nickName+'</td>'+
						'	<td>'+data.readNum+'</td>'+
						'	<td>'+_readTime+'</td>'+
						'	<td>'+data.price+'</td>'+
						'	<td>'+(data.shareChannel == 1?"来自朋友/群":"来自朋友圈")+'</td>'+
						'	<td>'+data.obtainTime+'</td>'+
						'	<td>'+(data.payStatus==1?"是":"否")+'</td>'+
						'</tr>';
			return html;
		}
		//搜索
		$('#searchInput').bind('keyup', function(event) {
			if (event.keyCode == "13") {
		　　　　//回车执行查询
				$(this).blur();
				nickName = $(this).val();
				pageNo=1;
				initRedPacketDetails();
		　　	}
		});
		//选择用户类型
		$("#userType").on('change', function(){
			userType = $(this).val();
			$('#searchInput').val("");
			nickName = "";
			pageNo=1;
			initRedPacketDetails();
		});
		
		//点击导出表格
		$("#exportTable").click(function(){
			if ($("#detailsTable tbody").find("tr").length == 0) {
				return;
			}
			if (nickName == null || nickName == undefined) {
				nickName = "";
			}
			window.location.href=base.url.exportGrantRedPackInfo+"?userID="+userID+"&companyID="+companyID+"&redPackID="+redPackID+"&nickName="+nickName+"&userType="+userType;
		});
	</script>
</body>
</html>
